<template>
    <v-layout column justify-center>
        <v-flex xs12 sm8 md6>
            <v-tabs show-arrows center-active>
                <v-tab
                    v-for="(item,index) in baseNavList"
                    :key="index"
                    @click.stop="get_snav(item.id)"
                >{{item.categoryName}}</v-tab>
            </v-tabs>
            <v-card>
                <v-tabs show-arrows center-active>
                    <v-tab
                        fixed-tabs
                        v-for="(item,index) in snav_list"
                        :key="index"
                        @click.stop="get_good_list(item.id)"
                    >{{item.subCategoryName}}</v-tab>
                </v-tabs>
            </v-card>
            <v-card class="mx-auto" v-lazy>
                <v-container fluid>
                    <v-row dense>
                        <v-col v-for="card in initGoodList" :key="card.id" :cols="card.flex">
                            <v-card>
                                <v-img
                                    contain
                                    :src="card.goodCoverImg"
                                    class="white--text align-end"
                                    gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                                    height="280px"
                                >
                                    <v-card-title style="font-size:12px;" v-text="card.goodName"></v-card-title>
                                </v-img>

                                <v-card-actions>
                                    <v-spacer style="font-size:12px;">{{card.goodPrice}} $</v-spacer>

                                    <v-btn icon>
                                        <v-icon :color="card.color">mdi-heart</v-icon>
                                    </v-btn>

                                    <v-btn icon>
                                        <v-icon>mdi-bookmark</v-icon>
                                    </v-btn>

                                    <v-btn icon>
                                        <v-icon>mdi-share-variant</v-icon>
                                    </v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
export default {
    async asyncData({ $axios }) {
        const baaNav = await $axios.$get("/category");
        const initGoods = await $axios.$get("/goods?mainCategory=1&limit=100");
        initGoods.results.forEach((element) => {
            let keys = Math.random();
            if (keys > 0.5) {
                element.flex = 12;
                element.color = "green";
            } else {
                element.flex = 6.5;
                element.color = "red";
            }
        });
        console.log(initGoods.results);
        return { baseNavList: baaNav.results, initGoodList: initGoods.results };
    },
    data() {
        return {
            snav_list: [],
            select_basenav_id: 1,
        };
    },
    methods: {
        // 根据上级菜单id 获取二级菜单
        get_snav(id) {
            this.select_basenav_id = id;
            this.get_good_list(0);
            this.$axios
                .$get("/subcategory?parentcategory=" + id)
                .then((res) => {
                    let obj = { subCategoryName: "全部", id: 0 };
                    res.results.unshift(obj);
                    this.snav_list = res.results;
                });
        },
        // 根据二级菜单id 获取菜单下的所属商品列表
        get_good_list(id) {
            if (!id) {
                // id  == 0
                this.$axios
                    .$get(
                        `/goods?mainCategory=${this.select_basenav_id}&limit=100`
                    )
                    .then((res) => {
                        res.results.forEach((item) => {
                            let keys = Math.random();
                            if (keys > 0.5) {
                                item.flex = 12;
                                item.color = "green";
                            } else {
                                item.flex = 6.5;
                                item.color = "red";
                            }
                        });
                        this.initGoodList = res.results;
                    });
            } else {
                this.$axios
                    .$get(`/goods?category=${id}&limit=100`)
                    .then((res) => {
                        res.results.forEach((item) => {
                            let keys = Math.random();
                            if (keys > 0.5) {
                                item.flex = 12;
                                item.color = "green";
                            } else {
                                item.flex = 6.5;
                                item.color = "red";
                            }
                        });
                        this.initGoodList = res.results;
                    });
            }
        },
    },
    mounted() {
        this.get_snav(1);
    },
};
</script>
